<template>
  <div class="img-ct">
    <img :src="src? VUE_APP_FILE + src + '?imageView2/1/w/80/h/80' : ''" @click="readImg" />
    <el-dialog
      title="查看图片"
      :width="'500px'"
      :close-on-click-modal="false"
      :modal="false"
      :visible.sync="dialogData.dialogVisible"
    >
      <img style="display: block; max-width: 400px; margin: 0 auto;" :src="VUE_APP_FILE + src" />
    </el-dialog>
  </div>
</template>
<script>
const VUE_APP_FILE = process.env.VUE_APP_FILE

export default {
  name: 'read-img',
  props: {
    src: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      VUE_APP_FILE,
      dialogData: {
        dialogVisible: false,
        value: {},
        id: ''
      }
    }
  },
  methods: {
    /* 查看图片 */
    readImg($index, row) {
      this.dialogData.dialogVisible = true
    }
  }
}
</script>
<style scoped>
.img-ct {
  max-width: 150px;
  max-height: 150px;
  overflow: hidden;
  margin: 0 auto;
}
.img-ct > img {
  width: 100%;
}
</style>
